<%@ page contentType="text/html;charset=UTF-8" %>
  <html>

  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>地址API测试</title>
  </head>

  <body>
    <h3>地址API测试</h3>

    <div>
      <h4>测试获取根级地址（省份）</h4>
      <button onclick="testRootAddress()">获取省份列表</button>
      <div id="rootResult"></div>
    </div>

    <div>
      <h4>测试获取子级地址</h4>
      <input type="text" id="parentId" placeholder="输入父级地址ID，如110000" />
      <button onclick="testChildrenAddress()">获取子级地址</button>
      <div id="childrenResult"></div>
    </div>

    <script>
      function testRootAddress() {
        // 这里需要通过后端获取根级地址，暂时用固定数据测试
        $("#rootResult").html("根级地址测试 - 需要后端支持");
      }

      function testChildrenAddress() {
        var parentId = $("#parentId").val();
        if (!parentId) {
          alert("请输入父级地址ID");
          return;
        }

        $.ajax({
          url: "/admin/address/children/" + parentId,
          type: "GET",
          success: function (data) {
            var result = JSON.parse(data);
            if (result.success) {
              var html = "<h5>成功获取到 " + result.addressList.length + " 条子级地址：</h5>";
              html += "<ul>";
              for (var i = 0; i < result.addressList.length; i++) {
                html += "<li>" + result.addressList[i].address_areaId + " - " + result.addressList[i].address_name + "</li>";
              }
              html += "</ul>";
              $("#childrenResult").html(html);
            } else {
              $("#childrenResult").html("<p style='color:red'>获取失败：" + result.message + "</p>");
            }
          },
          error: function (xhr, status, error) {
            $("#childrenResult").html("<p style='color:red'>请求失败：" + error + "</p>");
          }
        });
      }
    </script>
  </body>

  </html>